<template>
	<view class="mainpadding beijingse">
		<view class="ffffff radius mainpadding">
			<view class="flexbetween">
				<view class="titletext">选择买入</view>
				<view class="jiajian">
					<view class="jianhao" @click="reducenum">
						<view class="line"></view>
					</view>
					<view class="xhtext">{{number}}</view>
					<view class="jiahao" @click="addnum"></view>
				</view>
			</view>
			<view class="margin_top2 huangsetext">{{Number(price).toFixed(2)}}通证（根据份数系统自动展示）</view>
		</view>
		<view class="ffffff radius mainpadding margin_top flexbetween" @click="checktz=!checktz">
			<view class="flexleft">
				<view class="xiaoicon margin_right1">
					<image src="../../static/image/system/tz.png" mode=""></image>
				</view>
				<view class="ershib margin_right1">通证</view>
				<view class="huisetext">（可用{{personInfo.token_price}}）</view>
			</view>
			<!-- 已勾选 -->
			<view class="yigouxuan margin_right3" v-if="checktz"></view>
			<!-- 未勾选 -->
			<view class="weigouxuan margin_right3" v-if="!checktz"></view>
		</view>
		<view class="ffffff radius mainpadding margin_top " v-if="ycst_xj_pay==1">
			<view class="titletext">选择现金支付方式</view>
			
			<view class="flexbetween margin_top" @click="changetype(10)">
				<view class="flexleft">
					<view class="xiaoicon margin_right1">
						<image src="../../static/image/system/weixin.png" mode=""></image>
					</view>
					<view class="ershib">微信</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==10"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=10"></view>
			</view>
			<view class="flexbetween margin_top" @click="changetype(20)">
				<view class="flexleft">
					<view class="xiaoicon margin_right1">
						<image src="../../static/image/system/zhifub.png" mode=""></image>
					</view>
					<view class="ershib">支付宝</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==20"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=20"></view>
			</view>
			<view class="flexbetween margin_top"  @click="changetype(30)">
				<view class="flexleft">
					<view class="yinhk margin_right1"></view>
					<view class="notitletext margin_right1">银行卡</view>
					<view class="huisetext" v-if="!personInfo.user_bank">（暂未绑卡点击去绑卡）</view>
					<view class="huisetext" v-if="personInfo.user_bank">{{personInfo.user_bank.open_bank}}
					</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==30 && personInfo.user_bank"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=30 && personInfo.user_bank"></view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb" @click="tzzfcg">
			<view class="bigbtn">立即支付</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				personInfo:{
					token_price:"",
					"user_bank": {
						"id": 1,
						"bank_realname": "",
						"bank_cardno": "",
						"open_bank": "",
						"bank_address": "",
						"user_id": 2,
					},
				},
				dataAll:{
					token_price:"",
				},
				price:"",
				number:1,
				checktz:false,
				paytype:'',//10微信支付，20支付宝支付，30银行卡支付
				ycst_xj_pay:0,
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.openid = uni.getStorageSync("openid")
		},
		onShow() {
			this.getConfigInfo()
			this.init()
			this.getdetail()
		},
		methods: {
			getConfigInfo(){
				let _this = this;
				httpRequest.request('/api/index/getConfigInfo', 'POST', {
					
				}, false, false, true).then(res => {
					if (res.code == 1) {
						_this.ycst_xj_pay = res.data.ycst_xj_pay
						if(_this.ycst_xj_pay==1){
							_this.checktz=false
							_this.paytype=10
						}else if(_this.ycst_xj_pay==0){
							_this.checktz=true
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getdetail() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.personInfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init() {
				let _this = this;
				httpRequest.request('/api/styc/stycDetail', 'POST', {
					id: this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.dataAll = res.data
						this.price = res.data.token_price
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			reducenum(){
				if(this.number==1){
					httpRequest.toast("不能再减了哦！")
					return
				}
				this.number = this.number - 1
				this.price = Number(this.number) * Number(this.dataAll.token_price)
			},
			addnum(){
				this.number = this.number + 1
				this.price = Number(this.number) * Number(this.dataAll.token_price)
			},
			//更改支付方式
			changetype(i){
				this.paytype = i
				if(i==3 && !this.personInfo.user_bank){
					uni.navigateTo({
						url:"/pages/mypage/yinhangkbd"
					})
					return
				}
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			// 跳转支付成功页面
			tzzfcg() {
				let platform = ""
				// #ifdef H5
					platform = 30
				// #endif
				// #ifdef APP-PLUS
					platform = 10
				// #endif
				
				if(order_from==30 && this.paytype==10 && !this.isWechat()){
					httpRequest.toast("请在微信中打开此网址，否则将影响您的微信支付功能")
					return false
				}
				httpRequest.modal('提示', '确定立即支付吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/stycorder/addStycOrder', 'POST', {
							styc_id: this.listid,
							num:this.number,
							pay_type:this.paytype,//10微信支付，20支付宝支付，30银行卡支付
							platform:platform,//30H5,10app
							openid:this.openid
						}, false, false, true).then(res => {
							if(res.code==1){
								// H5微信
								if (platform == 30 && this.paytype == 10) {
									this.hpay(res.data.appconfig)
								}
								// H5支付宝
								if (platform == 30 && this.paytype == 20) {
									this.payment(res.data)
								}
								// app微信
								if (platform == 10 && this.paytype == 10) {
									// this.appwxpay(res.data)
								}
								// app支付宝
								if (platform == 10 && this.paytype == 20) {
									this.appzfbpay(res.data)
								}
								return false
							}
							if (res.code == 2) {
								uni.navigateTo({
									url: '/pages/homepage/zhifuchengg?price=' + this.price
								})
								return false
							}
							httpRequest.toast(res.msg);
						}).catch(err => {
							uni.hideLoading()
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// H5微信支付
			hpay(data) {
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
					"appId": data.appId, //公众号ID，由商户传入    
					"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数    
					"nonceStr": data.nonceStr, //随机串    
					"package": data.package,
					"signType": data.signType, //微信签名方式：    
					"paySign": data.paySign //微信签名
				}, function(res) {
					//android：支付成功、支付失败、取消支付  都能执行这个回调
					//ios：支付失败、取消支付  能执行这个回调， 支付成功不执行这个回调
					// alert('支付结果：' + res.err_msg);
					console.log('支付结果：', res.err_msg)
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						// 使用以上方式判断前端返回,微信团队郑重提示：
						//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						// alert('支付成功！');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/homepage/zhifuchengg?price=' + _this.price
							})
						}, 1000)
					}
					if (res.err_msg == "get_brand_wcpay_request:cancel") {
						// alert('你已经取消支付了！');
					}
					if (res.err_msg == "get_brand_wcpay_request:fail") {
						// alert('支付失败了！');
					}
				});
			},
			// H5支付宝支付
			payment(data) {
				let that = this
				//#ifdef H5
				// 将接口返回的form表单显示到页面
				document.querySelector('body').innerHTML = data.appconfig;
				// 调用submit方法
				document.forms[0].submit()
				//#endif
			},
			//app支付宝支付
			appzfbpay(data) {
				let _this = this
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data.appconfig, //后台返回的支付数据
					success: function(res) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/homepage/zhifuchengg?price=' + _this.price
							})
						}, 1000)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yinhk {
		width: 36rpx;
		height: 36rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/yhk.png');
	}
	.huisetext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.xiaoicon {
		width: 36rpx;
		height: 36rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huangsetext {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
	}

	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 14rpx;
		right: 12rpx;
		background-image: url('../../static/image/system/jiaohao.png');
	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 13rpx;
		// height: 3.5rpx;
		top: 20rpx;
		height: 20rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.xhtext {
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 164rpx;
		height: 46rpx;
		position: relative;
		border-radius: 20rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jiajian.png');
	}
</style>
